<template>
    <div @click="handleClickItem" class="item">
        <el-card 
            :body-style="{ padding: '0px' }" 
            :shadow="selected?'always': 'never'">
            <div class="header">
                <el-dropdown 
                    trigger="click" 
                    class="dropdown" 
                    @command="handleCommandEvent">
                    <span 
                        class="el-dropdown-link"  
                        @click.stop style="font-size: 0.8em;">
                        更多
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="setCover">
                            <i class="el-icon-picture-outline"></i>
                            设为封面
                        </el-dropdown-item>
                        <el-dropdown-item command="delete">
                            <i class="el-icon-delete"></i>
                            删除图片
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <el-image 
                style="width: 200px; height: 140px"
                :src="currentPic.url"
                fit="cover">
            </el-image>
            <div style="padding: 5px;">
                <span v-if="index==1">封面</span>
                <span v-else>
                    {{currentPic.width}} * {{currentPic.height}}
                </span>
            </div>  
        </el-card>
    </div>
</template>
<script>
export default {
    props: ['index', 'currentPic'],

    data() {
        return {
            selected: false
        }
    },

    mounted(){
        
    },

    methods: {
        /** 处理当点击了当前Item时的事件 */
        handleClickItem(){
            this.selected = !this.selected
            if(this.selected){
                this.$emit('picSelected', this.currentPic)
            }else {
                this.$emit('picCancelSelected', this.currentPic)
            }
        },

        /** 处理当选择命令时的事件 */
        handleCommandEvent(command){
            if(command=='setCover'){ // 设置为封面
                this.$api.picturesApi.setCover({id:this.currentPic.id}).then(res=>{
                    if(res.data.state==200){
                        console.log('设置为封面', res)
                        this.$emit('coverChanged')
                    }else{
                        this.$alert(res.data.message, '提示')
                    }
                })
            }else if(command=='delete'){ // 删除图片

            }
        }
    }
}
</script>
<style scoped>
    .el-card.is-always-shadow{
        box-shadow: 0 0px 5px 0 rgb(1 160 160 / 100%);
    }
    .item {
        width: 200px; 
        border:2px solid #fff0;
        margin: 30px 0px 0px 30px; 
        display: inline-block;                          
    }
    .item .header{
        border-bottom: 
        1px solid #ccc;
        height: 30px; 
        line-height: 30px; 
        padding: 0px 8px;
        font-size:0.9em;
    }
    .item .header .index{
        font-size: 0.9em;
        color: #666;
        font-weight: bolder;
    }
    .item .content {
        text-align: center;
        height: 140px;
        border-bottom: 1px solid #ccc;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .item .content img{
        height: 140px;
    }
    .item .footer{
        height: 30px; 
        text-align: center;
        line-height: 30px;
        font-size: 0.9em;
    }
    .item .header .dropdown{
        float: right;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>
